<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <a-tabs type="line" v-model="key" auto-switch>
      <a-tab-pane title="后台设置" key="1">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="backStageForm"
                :model="backStage"
                :labelCol="{ span: 8 }"
                @submit="submit"
              >
                <a-form-item
                  label="后台名称"
                  field="name"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '请输入后台名称' }]"
                  :validate-trigger="['change']"
                >
                  <a-input v-model.trim="backStage.name" placeholder="请输入后台名称" />
                </a-form-item>
                <a-form-item label="登录背景">
                  <a-radio-group class="radio-bcg" v-model="backStage.backgroundCustom">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">自定义背景</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">默认背景</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="上传背景" field="icp" v-if="backStage.backgroundCustom">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    :limit="1"
                    @success="onSuccessBcg"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="backStage.backgroundImage"
                      >
                        <img :src="backStage.backgroundImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                </a-form-item>
                <a-form-item label="后台LOGO" field="publicSecurity">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onSuccessLogo"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="backStage.logoImage"
                      >
                        <img :src="backStage.logoImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" type="primary" long>保存设置</a-button>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="充值前端" key="2">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="12">
              <a-form ref="clientRef" :model="clientForm" @submit="submitClient">
                <a-form-item
                  label="充值端名称"
                  field="name"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '请输入充值端名称' }]"
                  :validate-trigger="['change']"
                >
                  <a-input v-model.trim="clientForm.name" placeholder="请输入充值端名称" />
                </a-form-item>
                <a-form-item
                  label="充值端标题"
                  field="title"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '请输入充值端名称' }]"
                  :validate-trigger="['change']"
                >
                  <a-input v-model.trim="clientForm.title" placeholder="请输入充值端名称" />
                </a-form-item>
                <a-form-item
                  label="提示文字"
                  field="tips"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '请输入提示文字' }]"
                  :validate-trigger="['change']"
                >
                  <a-input v-model.trim="clientForm.tips" placeholder="请输入充值端名称" />
                </a-form-item>
                <a-form-item label="登录公告" field="notice">
                  <a-input v-model.trim="clientForm.notice" placeholder="请输入登录公告" />
                </a-form-item>
                <a-form-item label="人工客服" field="customerServiceLink">
                  <a-input
                    v-model.trim="clientForm.customerServiceLink"
                    placeholder="请输入人工客服链接"
                  />
                </a-form-item>
                <a-form-item label="登录背景">
                  <a-radio-group class="radio-bcg" v-model="clientForm.backgroundCustom">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">自定义背景</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">默认背景</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="上传背景" v-if="clientForm.backgroundCustom">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onClientBcg"
                    :limit="1"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="clientForm.backgroundImage"
                      >
                        <img :src="clientForm.backgroundImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                </a-form-item>
                <a-form-item label="自定义LOGO">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onClientLogo"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="clientForm.logoImage"
                      >
                        <img :src="clientForm.logoImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" type="primary" long>保存设置</a-button>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import IconEdit from '@arco-design/web-vue/es/icon/icon-edit'
  import IconPlus from '@arco-design/web-vue/es/icon/icon-plus'
  import { settingset, settingget, clientset, clientget } from '@/api/user'
  import { post, get } from '@/api/http'
  import { onMounted, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'

  const key = ref('0')

  //后台设置
  const backStageForm = ref()
  const backStage = ref({
    name: '', //系统名称
    backgroundCustom: false, //true开启自定义背景图片 false不开启
    backgroundImage: '', //背景图片地址
    logoImage: '', //logo地址
  })
  //获取
  const systemAdminFn = () => {
    get({
      url: settingget,
    }).then((res) => {
      if (res.data) {
        if (res.data.name) {
          document.title = res.data.name
        }
        backStage.value = res.data
      }
    })
  }
  //保存
  const upSystemAdmins = () => {
    post({
      url: settingset,
      data: {
        ...backStage.value,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        systemAdminFn()
      }
    })
  }
  //确认
  const submit = async () => {
    backStageForm.value.validate((error: any) => {
      if (!error) {
        upSystemAdmins()
      }
    })
  }
  //背景图上传
  const onSuccessBcg = (fileItem: any) => {
    backStage.value.backgroundImage = fileItem.response.data.path
  }
  //Logo上传
  const onSuccessLogo = (fileItem: any) => {
    backStage.value.logoImage = fileItem.response.data.path
  }
  //前端设置
  const clientRef = ref()
  const clientForm = ref({
    name: '', //系统名称
    title: '', //标题
    tips: '',
    notice: '', //公告
    customerServiceLink: '',
    backgroundCustom: false, //true开启自定义背景图片 false不开启
    backgroundImage: '', //背景图片地址
    logoImage: '', //logo地址
  })
  // 获取
  const clientFn = () => {
    get({
      url: clientget,
    }).then((res) => {
      if (res.data) {
        clientForm.value = res.data
      }
    })
  }
  //保存
  const upClients = () => {
    post({
      url: clientset,
      data: {
        ...clientForm.value,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        clientFn()
      }
    })
  }

  //确认
  const submitClient = async () => {
    clientRef.value.validate((error: any) => {
      if (!error) {
        upClients()
      }
    })
  }

  //背景图上传
  const onClientBcg = (fileItem: any) => {
    clientForm.value.backgroundImage = fileItem.response.data.path
  }
  //Logo上传
  const onClientLogo = (fileItem: any) => {
    clientForm.value.logoImage = fileItem.response.data.path
  }

  onMounted(async () => {
    await systemAdminFn()
    await clientFn()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .box {
    padding: 20px;
    border-radius: 10px;
    background-color: var(--color-bg-2);
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }

  :deep(.arco-form-item-label) {
    width: 85px !important;
    text-align: left;
    height: 18px;
  }
</style>
